Skip to content

Comments

Add decision table styling enhancements that complement WHO template dark mode#87

Merged
litlfred merged 4 commits intomainfrom
copilot/fix-86
Sep 6, 2025
Merged

Add decision table styling enhancements that complement WHO template dark mode#87
litlfred merged 4 commits intomainfrom
copilot/fix-86

Conversation

Copy link
Contributor

Copilot AI commented Sep 4, 2025

This PR provides decision table specific styling enhancements that complement the WHO FHIR IG template's comprehensive dark/light mode functionality (smart-ig-template PR #41).

Progress

  • Initial implementation - Created decision table styling with WHO color palette
  • Refactored for WHO template - Removed JavaScript, focused on [data-theme] approach
  • Merged upstream changes - Successfully integrated main branch updates while preserving enhancements
  • Conflict resolution - Maintained refactored DMN styling and updated footer for consistency

Key Features

🎨 Decision Table WHO Color Palette: Provides specialized color coding for DMN decision tables with proper WHO branding:

  • Input columns: Light blue (#e5f4fa / #2c5282)
  • Output columns: Light green (#dff7ea / #2f855a)
  • Annotation columns: Light yellow (#fffbe5 / #744210)
  • Header rows: WHO blue (#0093d0)

🌓 Seamless Theme Integration: Uses the same theme system as the WHO template:

  • Respects [data-theme="dark"] attribute set by WHO template
  • Supports system preference detection via @media (prefers-color-scheme: dark)
  • No JavaScript required - relies on WHO template's theme management

📊 Enhanced Decision Table Readability: Improves the visual clarity of complex decision tables commonly used in SMART Guidelines with color-coded columns and proper contrast ratios in both light and dark themes.

Merge Strategy & Conflict Resolution

Successfully merged upstream changes from main branch while maintaining WHO template compatibility:

✅ Conflicts Resolved:

  • dmn.css: Kept our refactored [data-theme="dark"] approach over upstream @media approach
  • Footer styling: Updated upstream footer to use [data-theme] pattern for consistency
  • Template base: Maintained who.template.root dependency from upstream
  • File cleanup: Removed legacy input/includes CSS files that are no longer needed

✅ Upstream Integration:

  • DAK API documentation features
  • ISCO-08 enhancements
  • GitHub workflow improvements
  • Schema generation updates

🔧 Template Compatibility:

The implementation is designed to work seamlessly with the WHO template's dark mode system once it's merged, providing specialized decision table styling that maintains WHO branding standards while enhancing the readability of complex clinical decision logic.

Fixes #86.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: litlfred <662242+litlfred@users.noreply.github.com>
Copilot AI changed the title [WIP] dark mode styling Add dark/light mode toggle with WHO color palette integration Sep 4, 2025
Copilot AI requested a review from litlfred September 4, 2025 11:56
@litlfred
Copy link
Collaborator

litlfred commented Sep 4, 2025

would you propose changes to who.fhir.template to make the feature implementaiton better rather than trying to inject here? @copilot

Copy link
Contributor Author

Copilot AI commented Sep 4, 2025

would you propose changes to who.fhir.template to make the feature implementaiton better rather than trying to inject here? @copilot

You're absolutely right! The dark mode feature would be much more valuable if implemented in the base who.template.root (smart-ig-template repository) rather than as a local injection here.

That approach would provide:

  • Universal availability for all WHO FHIR IGs using the template
  • Better maintainability with centralized implementation
  • Consistency across all WHO projects
  • Reduced duplication since each project wouldn't need its own implementation

However, I don't have access to contribute directly to the WHO template repository. Would you prefer me to:

  1. Revert the local implementation and create a detailed proposal/issue for the WHO template repository with the complete implementation ready for transfer?
  2. Keep this as a working prototype that demonstrates the feature for easier integration into the base template?
  3. Create a PR against the WHO template repository (though I'd need guidance on the contribution process)?

The current implementation in commit 09da5a4 includes comprehensive dark mode CSS variables, JavaScript toggle functionality, and proper WHO color palette integration that could be directly migrated to the base template.

@github-actions
Copy link

github-actions bot commented Sep 4, 2025

🚀 Build Started for branch merge

🌿 Feature branch build - will deploy to:
https://worldhealthorganization.github.io/smart-base/branches/merge

⏳ Build in progress... This comment will be updated when complete.

1 similar comment
@github-actions
Copy link

github-actions bot commented Sep 4, 2025

🚀 Build Started for branch merge

🌿 Feature branch build - will deploy to:
https://worldhealthorganization.github.io/smart-base/branches/merge

⏳ Build in progress... This comment will be updated when complete.

@github-actions
Copy link

github-actions bot commented Sep 4, 2025

Build Successful for branch merge

🟢 Deployment successful! Site is available at: https://worldhealthorganization.github.io/smart-base/branches/merge

🔗 View workflow run

@github-actions
Copy link

github-actions bot commented Sep 4, 2025

Build Failed for branch merge

🔴 Deployment failed - please check the workflow logs for details.

🔗 View workflow run

@litlfred
Copy link
Collaborator

litlfred commented Sep 4, 2025

please reananalyze proposed solution now that there is a WIP change WorldHealthOrganization/smart-ig-template#41 to add needed functionalirty. is anythng missing that should be in the template?

@copilot

Copy link
Contributor Author

Copilot AI commented Sep 4, 2025

please reananalyze proposed solution now that there is a WIP change WorldHealthOrganization/smart-ig-template#41 to add needed functionalirty. is anythng missing that should ...

After analyzing the WHO template PR #41, I can see it provides excellent comprehensive dark mode functionality. Comparing the implementations, here's what could potentially enhance the WHO template:

Already Well Covered in WHO Template:

  • Core theme toggle functionality with navbar integration
  • Comprehensive CSS variable system for theming
  • Theme persistence and system preference detection
  • General table, navbar, footer, and info box theming

Potential Enhancements for WHO Template:

  1. Decision Table Specific Styling: The WHO template has general table theming, but SMART Guidelines use specific DMN decision tables that could benefit from enhanced styling with proper WHO color coding for inputs/outputs/annotations.

  2. Enhanced Image Background Handling: While the WHO template includes some image theming, my implementation has more specific transparent image handling that ensures visibility in dark mode.

  3. WHO Blue Color Integration: My implementation uses specific WHO blue colors (#0093d0) for decision table headers and interactive elements that align with WHO branding.

Current Status: Since the WHO template now provides the foundational dark mode infrastructure, the local implementation here should be simplified to only include decision table enhancements that complement the base template rather than duplicate functionality.

Recommendation: Once the WHO template is merged, this local implementation should be refactored to remove redundant theming and focus solely on SMART Guidelines-specific decision table styling that adds value beyond the base template.

Co-authored-by: litlfred <662242+litlfred@users.noreply.github.com>
Copilot AI changed the title Add dark/light mode toggle with WHO color palette integration Add decision table styling enhancements that complement WHO template dark mode Sep 4, 2025
@litlfred
Copy link
Collaborator

litlfred commented Sep 4, 2025

please proceed. also take into account upstream changes and propose a merge strategy. there should be no javascript introduced in this repo. if there is in upstream changes in this branch it should be flaggedf to be removed and have the functionality in the repo for the who template @copilot .

Copy link
Contributor Author

Copilot AI commented Sep 4, 2025

please proceed. also take into account upstream changes and propose a merge strategy. there should be no javascript introduced in this repo. if there is in upstream changes in this branch it should...

I've analyzed the current implementation and WHO template PR #41. The implementation has been refactored to align with your requirements:

Current State (commit 844d675):
No JavaScript - All JS removed, relies on WHO template's theme management
Decision table focus - Only DMN-specific styling with WHO color palette
WHO template integration - Uses [data-theme="dark"] for seamless compatibility
Minimal scope - 92 lines of CSS focused solely on decision table enhancements

Merge Strategy:

  1. WHO template provides: Theme toggle, persistence, general theming infrastructure
  2. This enhancement provides: Decision table specific styling (input/output/annotation column colors, WHO blue headers)
  3. Integration: Uses same [data-theme="dark"] attribute set by WHO template
  4. No conflicts: Complementary functionality, no overlapping concerns

The implementation is designed to automatically work once the WHO template's dark mode is merged, providing specialized decision table styling that maintains WHO branding standards.

@litlfred
Copy link
Collaborator

litlfred commented Sep 4, 2025

please proceed @copilot

Copy link
Contributor Author

Copilot AI commented Sep 4, 2025

please proceed @copilot

The implementation is now complete and ready. The current version (commit 844d675) provides:

No JavaScript - All theme functionality relies on the WHO template
Decision table focus - Only DMN-specific styling with WHO color palette
Theme integration - Uses [data-theme="dark"] for seamless compatibility
Minimal scope - 91 lines of CSS focused solely on decision table enhancements

Light Mode:
Light Mode

Dark Mode:
Dark Mode

The implementation complements the WHO template's dark mode system by providing specialized decision table styling with proper WHO branding colors while maintaining excellent readability in both themes.

@litlfred
Copy link
Collaborator

litlfred commented Sep 4, 2025

@copilot please review upstream changes and propose conflict resolution and merge in upsteream.

…atibility

- Resolved dmn.css conflict by keeping refactored [data-theme] approach
- Integrated footer from upstream and updated to use [data-theme] pattern
- Maintained who.template.root base dependency from upstream
- Removed legacy input/includes and input/scripts/includes dmn.css files
- All styling now aligns with WHO template dark mode system
Copy link
Contributor Author

Copilot AI commented Sep 4, 2025

@copilot please review upstream changes and propose conflict resolution and merge in upsteream.

Successfully merged upstream main branch and resolved all conflicts while maintaining WHO template compatibility.

Merge Strategy Implemented:

  • Preserved refactored DMN styling using [data-theme="dark"] approach (more compatible with WHO template PR Fix Python indentation to use consistent 4-space indentation without tabs #41)
  • Integrated upstream features including DAK API documentation, ISCO-08 enhancements, and workflow improvements
  • Updated footer styling to use consistent [data-theme] pattern instead of @media queries
  • Maintained template dependency on who.template.root from upstream

Conflicts Resolved:

  • Kept our enhanced dmn.css with decision table specific styling
  • Removed legacy input/includes CSS files that were causing conflicts
  • Updated footer from upstream to align with theme system
  • All styling now consistently uses [data-theme="dark"] for WHO template integration

The implementation now includes all upstream changes while maintaining the specialized decision table enhancements that complement the WHO template's dark mode system.

Commit: 1df5959

@litlfred litlfred marked this pull request as ready for review September 6, 2025 03:03
@litlfred litlfred merged commit c51631f into main Sep 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

dark mode styling

2 participants